<template>

    <div class="body">
      <el-row :gutter="20" class="mycharts">
        <el-col :span="6">
           <div class="mydate">
             <div><img :src="icon" /><span>我的日程</span></div>
              <div class="mycate">
                <el-checkbox-group v-model="checkedEvent" @change="handleCheckedChange">
                  <el-checkbox v-for="item in eventOptions" :label="item.dictValue" :key="item.dictValue">{{item.dictLabel}}</el-checkbox>
                </el-checkbox-group>
              </div>

          </div>
        </el-col>
         <el-col :span="18">
           <div class="mycalendar">
              <full-calendar
                @changeMonth="changeMonth"
                :config="config"
                :events="events"
                ref="calendar"
              ></full-calendar>
          </div>
        </el-col>
      </el-row>

        <el-dialog :title="addEvent.title" :visible.sync="addEvent.open" width="600px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="120px">
              <el-form-item label="日程标题" prop="title" >
                <el-input v-model="form.title"   placeholder="请输入日程标题" />
              </el-form-item>
              <el-form-item label="日程类型" prop="eventType" >
                <el-select v-model="form.eventType"  size="small">
                  <el-option
                        v-for="dict in eventOptions"
                        :key="dict.dictValue"
                        :label="dict.dictLabel"
                        :value="dict.dictValue"
                      />
                </el-select>
              </el-form-item>
              <el-form-item label="开始时间" prop="startTime" >
                 <el-date-picker
                  value-format="yyyy-MM-dd HH:mm:ss"
                  v-model="form.startTime"
                  type="datetime"
                  placeholder="选择开始时间">

                </el-date-picker>
              </el-form-item>
              <el-form-item label="结束时间" prop="limitTime" >
                 <el-date-picker
                 value-format="yyyy-MM-dd HH:mm:ss"
                  v-model="form.limitTime"
                  type="datetime"
                  placeholder="选择结束时间">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="提醒时间" prop="noticeTime" >
                 <el-date-picker
                 value-format="yyyy-MM-dd HH:mm:ss"
                  v-model="form.noticeTime"
                  type="datetime"
                  placeholder="选择提醒时间">
                </el-date-picker>
              </el-form-item>
               <el-form-item label="备注" prop="content" >
                <el-input v-model="form.content"   placeholder="请输备注" />
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="submitForm">确 定</el-button>
              <el-button @click="addEvent.open=!addEvent.open">取 消</el-button>
            </div>
        </el-dialog>
        <el-dialog :title="showEvent.title" :visible.sync="showEvent.open" width="600px" append-to-body>
            <el-form   label-width="120px">
              <el-form-item label="日程标题" prop="title" >
                <el-input v-model="event.title"  :disabled="true"   placeholder="请输入日程标题" />
              </el-form-item>
              <el-form-item label="日程类型" prop="eventType" >
                 <el-select v-model="event.eventType" :disabled="true"  clearable size="small">
                  <el-option
                        v-for="dict in eventOptions"
                        :key="dict.dictValue"
                        :label="dict.dictLabel"
                        :value="dict.dictValue"
                      />
                </el-select>
              </el-form-item>
              <el-form-item label="开始时间"  prop="startTime" >
                 <el-date-picker :disabled="true"
                  v-model="event.startTime"
                  type="datetime"
                  placeholder="选择开始时间">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="结束时间" prop="limitTime" >
                 <el-date-picker :disabled="true"
                  v-model="event.limitTime"
                  type="datetime"
                  placeholder="选择结束时间">
                </el-date-picker>
              </el-form-item>
               <el-form-item label="提醒时间" prop="noticeTime" >
                 <el-date-picker :disabled="true"
                  v-model="event.noticeTime"
                  type="datetime"
                  placeholder="选择提醒时间">
                </el-date-picker>
              </el-form-item>
               <el-form-item label="备注" prop="content" >
                <el-input :disabled="true"   v-model="event.content"   placeholder="" />
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="showEvent.open=!showEvent.open">关 闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
//https://blog.csdn.net/weixin_44254243/article/details/105238681
import { getMyEventList,addEvent } from "@/api/crm/event";
import icon from '@/assets/icon/menu.png'
import { FullCalendar } from 'vue-full-calendar' //单页
import 'fullcalendar/dist/fullcalendar.css'
export default {
  name: 'Index',
  components: { FullCalendar },
  data() {
    return {
        noticeType:["分钟","小时","天"],
        showEvent:{
          title:"查看日程",
          open:false,
        },
        addEvent:{
          title:"新增日程",
          open:false,
        },
        event:{},
        form:{
          eventId:undefined,
          eventType:"1",
          startTime:undefined,
          limitTime:undefined,
          noticeTime:undefined,
          title:undefined,
          content:undefined,
        },
        rules:{
          title: [
            { required: true, message: "标题不能为空", trigger: "blur" }
          ],
          startTime: [
            { required: true, message: "开始时间不能为空", trigger: "blur" }
          ],
          limitTime: [
            { required: true, message: "结束时间不能为空", trigger: "blur" }
          ],
          noticeTime: [
            { required: true, message: "提醒时间不能为空", trigger: "blur" }
          ],
        },
        checkedEvent: [],
        eventOptions:[],
        icon: icon,
        selectDate:'',//日期选择器选中的月份
        events: [],
        myEvents:[],
        config: {
          firstDay:'0',//以周日为每周的第一天
          buttonText: { today: "今天", month: "月", week: "周", day: "日" },
          header: {left:'today', center: 'prev, title, next'},
          theme:false,//是否允许使用jquery的ui主题
          height:'auto',
          slotLabelFormat:'H:mm', // axisFormat 'H(:mm)'
          //slotLabelInterval:1,
          views: {
            month: {
              titleFormat: 'YYYY年MMM'
            },
            day: {
              titleFormat: 'YYYY年MMMDD日 dddd'
            }
          },
          monthNames: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
          monthNamesShort: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
          dayNames: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
          dayNamesShort: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
          slotDuration:'00:30:00',
          minTime:'00:00',
          maxTime:'24:00',
          locale: "zh-cn",
          editable: false, //是否允许修改事件
          selectable: false,//是否允许用户单击或者拖拽日历中的天和时间隙
          eventLimit: false, // 限制一天中显示的事件数，默认false
          allDaySlot:true, //是否显示allDay
          displayEventEnd: false,//是否显示结束时间
          allDayText: '全天',
          navLinks: true, //允许天/周名称是否可点击
          defaultView: "month", //显示默认视图
          eventClick: this.eventClick, //点击事件
          dayClick: this.dayClick, //点击日程表上面某一天
          eventRender: this.eventRender,



        }
    }
  },
   created() {
      this.getDicts("crm_event_type").then((response) => {
          this.eventOptions = response.data;
      });
      this.getMyEventList();
  },
  methods: {
      submitForm(){
        this.$refs["form"].validate(valid => {
          if (valid) {
            addEvent(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("创建成功");
                  this.addEvent.open = false;
                  this.getMyEventList(this.customerId);
                }
              });
          }
        });
      },
      getMyEventList() {
        var data={eventTypeIds:this.form.eventTypeIds};
        getMyEventList(data).then(response => {
          this.events=[];
          this.myEvents=response.list;
          if(data!=null){
            // {
            //   id:5,
            //   title:'春游4',
            //   start: '2021-03-17 15:00:00',
            //   end: '2021-03-17 16:00:00',
            //   color: '#ff0000'
            // }
            for(var i=0;i<response.list.length;i++){
                var item={};
                item.id=response.list[i].eventId;
                item.title=response.list[i].title;
                item.start=response.list[i].startTime;
                item.end=response.list[i].limitTime;
                item.color="rgb(24, 144, 255)";
                this.events.push(item)
            }
          }

          this.users = response.data;
        });
      },
      handleCheckedChange(value) {
        console.log(value)
        this.form.eventTypeIds=value+"";
        this.getMyEventList();
      },
      changeDate(){
        this.$refs.calendar.fireMethod('gotoDate', this.selectDate)
      },
      // 点击事件
      eventClick (event, jsEvent, pos) {
        var that=this;
        that.showEvent.open=true;
        this.myEvents.forEach(function(element) {
          console.log(event.id)
          console.log(element)
          if(element.eventId==event.id){
            that.event=element
            that.event.eventType=that.event.eventType.toString();
          }
        });
      },
      // 点击当天
      dayClick (day, jsEvent) {
        this.addEvent.open=true;
        var d = day._i
        this.formatDate(d);
        //alert('dayClick', day, jsEvent)
        this.form.eventId=undefined;
        this.form.eventType="1";
        this.form.title="";
        this.form.content="";
        this.form.startTime=this.formatDate(d);
        this.form.limitTime=this.formatDate(d);
      },
      changeMonth(event){
        console.log(event)
      },

      eventRender:function (event, element) {
        console.log(event)
        element.find('.fc-title').attr('title',event.title)
      }
  }
}
</script>

<style lang="scss">
  .body{
    padding: 12px;
    background-color: rgb(240, 242, 245);
    position: relative;
  }
 .mycalendar{
   height: 100%;
   background-color:#ffffff;
   padding: 15px;

 }
.fc th{
   font-weight: normal;
   font-size: 14px;
 }
 .fc-toolbar h2{
   font-weight: normal;
   margin-top: 6px;
   font-size: 18px;
 }

</style>
<style lang="scss" scoped>
.mydate{
    border: 1px solid #e6e6e6;
    padding: 15px;
    border-radius:4px;
    background-color: white;
    img{
      margin-right: 10px;
      vertical-align: middle;
      width: 20px;
      height: 20px;
    }
    span{
      margin-top: 5px;
      vertical-align: middle;
      font-size: 14px;

    }
    .mycate{
      margin: 15px 0;
    }
 }
 .el-checkbox{
    display: block;
    margin: 10px 0;
 }

</style>
